<template>
  <div class="role">
    <!-- 角色内容 -->
    <div class="roleContent">
      <!-- 搜索栏 -->
      <div class="searchCnt">
        <div class="input-s" style="width:300px">
          <div style="width:60px">角色名:&nbsp;</div>
          <el-select
            v-model="roleForm.roleId"
            placeholder="请选择"
            clearable
            @change="getRloeData"
          >
            <el-option
              v-for="(item, index) in roleOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="getRloeData">确认搜索</el-button>
        <!-- 添加按钮 -->
        <div class="roleAdd">
          <el-button
            @click="addRole"
            icon="el-icon-circle-plus-outline"
            type="primary"
            >添加角色</el-button
          >
        </div>
      </div>
      <el-table
        :data="roleData"
        style="width: 100%;"
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
        :height="height"
        border
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column align="center" prop="name" label="角色名">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.name == null" style="color:red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="count" label="角色人数">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.count == null" style="color:red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.count }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="describe" label="备注">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.describe == null" style="color:red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.describe }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scoped">
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="确定删除该条数据？"
              @onConfirm="handleDelete(scoped.row)"
            >
              <el-button slot="reference" type="info" plain size="mini"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeShopChange"
          @current-change="handleCurrentShopChange"
          :current-page="roleForm.pageNumber"
          :page-sizes="[10, 20, 30, 45]"
          :page-size="roleForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { rolesList, roleDelete, roleList } from "../../utils/api";

export default {
  data() {
    return {
      roleOptions: [],
      roleData: [],
      total: 0,
      roleForm: {
        pageSize: 10,
        pageNumber: 1,
        roleId: ""
      },
      value: "",
      userId: ""
    };
  },
  props: ["height"],
  methods: {
    // 获取角色列表数据
    getRloeData() {
      this.postRequest(rolesList, this.roleForm).then(res => {
        if (res.code === 200) {
          this.roleData = res.data.data;
          this.total = res.data.count;
          // console.log(res);
        }
      });
    },
    getRloeList() {
      this.postRequest(roleList).then(res => {
        if (res.code === 200) {
          this.roleOptions = res.data;
        }
      });
    },
    // 分页
    // 选择每页多少条
    handleSizeShopChange(val) {
      this.roleForm.pageSize = val;
      this.getRloeData();
    },
    // 选择第几页
    handleCurrentShopChange(val) {
      this.roleForm.pageNumber = val;
      this.getRloeData();
    },

    // 删除
    handleDelete(data) {
      // console.log(data);
      this.postRequest(roleDelete, {
        id: data.id,
        userId: this.userId,
        name: data.name
      }).then(res => {
        if (res.code == 200) {
          this.getRloeData();
        }
      });
    },
    addRole() {
      this.$router.push("/addRole");
    }
  },
  created() {
    this.userId = window.sessionStorage.getItem("userId");
    this.getRloeData();
    this.getRloeList();
  }
};
</script>

<style lang="less" scoped>
.role {
  // width: 100%;
  background-color: white;
  .roleAdd {
    // width: 100%;
    padding: 16px 0px 16px 26px;
    box-sizing: content-box;
    .roleBtn {
      width: 110px;
      height: 30px;
      background: rgba(0, 119, 248, 1);
      border: 1px solid rgba(1, 101, 209, 1);
      opacity: 1;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      img {
        width: 14px;
        height: 14px;
      }
      span {
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .roleContent {
    // width: 100%;
    padding: 16px 26px 16px 26px;
    box-sizing: content-box;
    /*border: 1px solid rgba(234, 237, 243, 1);*/
    .searchCnt {
      border: 1px solid rgba(234, 237, 243, 1);
      padding: 16px 0px 16px 20px;
      box-sizing: content-box;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      color: rgba(158, 160, 165, 1);
      font-size: 14px;
      margin-bottom: 20px;
      .input-s {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }
      span {
        display: block;
        width: 110px;
        height: 30px;
        background: rgba(0, 119, 248, 1);
        border: 1px solid rgba(1, 101, 209, 1);
        opacity: 1;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        color: white;
        margin-left: 50px;
      }
    }
    /deep/ .el-table {
      /deep/ .el-table__header-wrapper {
        /deep/ .el-table__header {
          /deep/ .has-gutter {
            background-color: rgba(255, 255, 255);
          }
        }
      }
    }
  }
}
</style>
